After some research i’ve decided to pick up React.
However i’m feeling quite lost, i’ve gone through Codeacademy React tutorials, react-rails tutorials for simple apps and all of Justin’s videos but i’m not quite sure how to continue.
If anyone know’s of any resources or how to approach this i’d appreciate it.
Thanks
I highly recommend the lessons:
This is a React on Rails app, and parts of this page were done by the ShakaCode team!
Hi,
I also started it recently and these books were really helpful for me:
Adam Horton, Ryan Vice
Master the art of building modern web applications using React
Copyright 2016
and
Cássio de Sousa Antonio
Pro React
Copyright 2015
Both are informative and I found them quite explanatory.
As you can see one is from 2016 and the other one is from 2015, which is also cool.
I used them simultaneously with egghead.io tutorial!
This worked for me though.
Hopefully it helps you also !
Good luck!
I’ve been teaching React for a while and created a site. Though I don’t know if I am allowed to post it here.
However, I can tell you that first thing is to start from the very basics.
Learn what ReactElement is (It is basically an abstract concept like an HTML element, except you can control it via your JavaScript program, assign it to variable names, pass it to other react components and functions etc.)
React Element is almost synonymous with React Component.
In React.js you mix and match React Elements, Components and functional components (same as components created using React.createElement except using a plain JavaScript function constructor) and JSX format which does all of the above, except in a nice XML/HTML tag style structure.
The key to learning React is to figure out what its key principles are. It is almost like re-learning HTML all over again. Except in JavaScript.
Each React Component has a state. The state is basically a set of properties for your component. It can be “active” set to true or false. Or anything else you can conjure up. That’s up to you as the designer of your own React elements/components.
You also have props. So these props are passed to components to set various properties of that component and its values. A React Component is like a little pocket knife, and you design what it should be responsible for doing as far as your UI is concerned.
So once you get a good grasp on syntax of how to create Elements, Components, functional components and get a good grip on JSX tags, you’re ready to start designing your application. You’ll notice that eventually you’ll get to the point where your components will need to have children. And that’s where it gets a little more complicated & up to the custom design of your components.
That’s actually pretty much it. You create components that represent different types of objects in your app. Example: Buttons, lists, to-do lists, options of all kinds, switch buttons, check boxes, and anything that can possibly be designed with HTML.
This compartmentalized approach is nice because you only make a component once and you can “spawn” it using a for-loop. At this time it is only attached to temporary “virtual” DOM (not quite the actual JavaScript DOM) and will appear on the screen in your app only after you “mount” that element/component using ReactDOM.render method.
You keep going like that, creating components, mounting and unmounting them to and from your virtual DOM and control the flow of your application.
I think of React Components as turbocharged HTML elements. Because they give you so much more control over how they are programmatically represented on your page.
Hope any of this helps 