What is React Js?
You’re building a website and you need something to be interactive or potentially a dynamic interface right and it doesn’t necessarily have to be crazy interactive. It could just be a general interface, I mean they make static site generators out of react Js now.
So, either way, the whole point of react Js is just for building interfaces whether that’s interfaces that you click on something and something else changes and data loads. But at the end of the day, you’re just building interfaces and you can drop in if you want it to the right you could have a module of your site that is reactJs.
And they may be reactJs is just rendering a very small portion of your website it could be an entire HTML website and using react Js. You could drop in an interface maybe if this interface needs to be dynamic or something like that. So usually I think the misconceptions about react are that it does more than you think it.
People might think that it’s a whole framework it has all this sort of stuff in it. In reality, react is just code that makes it dead simple to interact with elements and build dynamic components and buy components.
I just mean areas or things in your website right a good way to think about it would be to even just look on this page overall like what could be a component here. Well this search area up top here search docks, this could be a component.
So if you think about it, this particular user interface requires that when you click on it and you start typing that a list of search terms just start coming up and then allows you to select one and then go on to something else but this thing’s a sort of doesn’t happen with basic HTML right and you couldn’t necessarily do all of this in the same way server-side or something
like that this requires that when the user in the browser starts typing something some dynamic stuff happens and some interfaces change or load or something like that and so that’s really the purpose of react right it’s to build cool stuff like this stuff that is dynamic now.
JSX and HTML
were to uncheck this checkbox you could see that this is what react looks like without JSX now honestly it’s recommended to use JSX . I personally do it’s a nice way to work in it but it
end of the day those two things are entirely separate and they’re interacting with each other here this whole thing is encapsulated in one little thing and just makes working with it just one-to-one SuperDuper easy in addition components also have something called state where well you can change their state.
About State in ReactJS
What is a state in Reactjs? You can think of it as a toggle. Toggle has two states on or off right and with reactjs, you can set that into the component this on or off value and you can trigger it, change it, whatever and then do something with that value further. It’s nothing groundbreaking in that regard but the fact that this state lives within this component and again a nice way to encapsulate everything. Now lastly we have some really cool stuff the fact that you’re building components.
Explaining State with Analogy
I like to describe these I don’t know if this is a great metaphor analogy you know but as Lego blocks right you have these blocks that you’re creating with your components. You can connect them together to make things. The reason why this doesn’t hold up entirely is
because react has this parent-child relationship obviously that Lego blocks don’t but what’s cool about this is that you can grab these different components from elsewhere from NPM someone else has written. You can use it in your project. They can be these macro things that generate full-on tables and charts.
It can be very micro like a simple toggle component that simply just makes it so you don’t have to write those state changes all the time. This kind of things that allow react to be so flexible. It’s one of the reasons why it’s really had just an absolutely blown up in the community now another great feature of react itself is that you can use react code on the client or server or both.
When it came out as well instead of trying to do everything. It tried to do just one thing really well and because of that, the community is extremely flexible. If you want to use other things in coordination with reactjs it’s extremely easy reactjs is not trying to do everything it’s not trying to. It’s just basically handling your user interface and how it’s displayed and updated on the screen so I’ve gone this far without talking about the virtual DOM which is one of the features that one of the things that people really really like about how react performs and essentially what the
What is virtual Dom (Document Object Model)
It’s if you well the Dom which is the document object model is essentially what the browser sees as HTML as a structure of your website and it’s how you interact with your website in the browser.
What react does is it basically creates an in-memory data structure cache so it’s caching what it looks. Then it’s computing differences and then it’s only changing what needs to be changed right now one thing that’s great about that is you get some really really fast page updates.
When you change things and move things around the only thing that needs to be changed is changed and everything else stays put and therefore react can be extremely fast again I mentioned this parent-child relationship as well basically where data comes down from one component into the next and it greatly mimics how you generally think of HTML structure overall.
If you look at some of my code right here you can see we have something like a toggle that wraps around a user menu wrapper that wraps around a user menu icon that wraps around a Gravatar now what’s interesting about this whole flow is that data can come down where I have the user passed into this component.
I can then use this same user and a child component whether it’s in the same file or not pass through something called props now if you want to learn about all this stuff again check out the react course but for the most part you always have this sort of top-down data structure where stuff’s going in from parent to child It makes knowing what’s going we’re extremely easy now another thing that came about with react is react native allowing you to write it basically reacts code you can write essentially code that looks just like this the only difference is you’re using custom components built by
it’s doing is an extending an existing class in that class comes from reactjs that’s what gives us components some of its powers right. Even though there is some jargony stuff here we still have a constructor we have we have methods in here. We’re using just straight-up
used that stuff it looks scary error functions all the stuff looks scary but the great thing is that
You can take your JSX and react code with you as well there’s a lot of other libraries that interface with Reax API, for instance, we have pre-act which is a three kilobyte alternative to react with the same as with the same es2015 API so what’s cool about pre-act is that this library aims to be able to be not
necessarily a drop-in replacement but a replacement for react nonetheless that’s not going to make you feel locked into a facebook project but more or less luck but more or less feel right at home building your components and another one is inferno which is a super-fast library
Jordan Wolk an engineer on Facebook was influenced by angular and some other stuff
Their latest version 16 which is also known as react fiber basically it’s an entirely new core algorithm that makes his thing run super fast. Going to be the foundation for a whole bunch of future improvements and things that fix some of the things that fix some of the issues that we’ll have with maybe some of the way.
We write react components so that’s pretty much it if there’s one thing you can take away from this is that react is not this big scary beast it’s not this giant foreign alien it’s not something that’s going to destroy the way you write HTML or understand websites but it will completely blow your mind in terms of how easy it is to build excellent user interfaces.