So as I mentioned in the previous post I’ve started learning the React library. I seem to have misspoke when I called it a framework.
React, in my initial understanding (I’ll correct myself in the future if I’m wrong), is used mainly for single page applications. Simply put, a website that uses a single HTML file, but functions as if there were several pages. While it can be used for a regular, multi-page site, single page seems to be it’s primary reason for existence.
React is for front-end development, meaning that it has it’s primary use in creating interaction with what the site’s visitors see and use. For example, using ReactDOM.render(), HTML can be shown on the web page through React.
I had some initial confusion with it, such as how to incorporate Bootstrap, because if you google using Bootstrap with React you’ll get a series of links and tutorials about adding React-Bootstrap that allows for this. My thought was that I would need to learn an entirely new setup and class set, but I was mistaken.
In truth, Bootstrap can be used as normal with React, without additional work. React-Bootstrap, I’m told, cuts down on the amount of code and typing typically done when using the Bootstrap classes, but it appears it isn’t fully necessary.
Speaking of Bootstrap and classes, there is another difference with React. Ordinarily, when typing out HTML, you add classes or ids. These are then used to work with other parts that make up the site, such as CSS. However, React doesn’t really like class, so it expects to see className instead. It works exactly the same way, though.
In-line styling is different as well. It is simpler to have the style parameters stored in a variable and added versus simply adding the in-line styling normally. This appears to be helpful in cases, and gives the idea that with React, styling and content and interactivity are held in the same file, versus split in two or three files(HTML, CSS, JavaScript). It lends itself to being friendlier to reuse code throughout the site.
Not to say that React is all contained in one file. Each piece is stored in it’s own file, called a component. The component, from what I’ve seen, contains all of it needs for use, complete with content and styling as mentioned above. The component has an export command or multiple exports at the end that sends it’s function when the component is imported. At that point the component can be used again, and again if needed.
With the exception of containing it’s on CSS and interactions, this seems similar to PHP files, even though PHP is back-end. With PHP, you can split a page into multiple files, then import those files where they are needed on the page. For example, the subscription site I am currently building has multiple files being used for any given page. The initial HTML boilerplate code is stored in a header file, the navigation is stored in it’s own file, and the footer contains the relevant links for JavaScript. All these files are then called and imported into one, creating a full web page. React seems to do this as well, albeit perhaps a bit better since it is designed for single-page work.
I know that’s all a bit confusing, as I can’t really simplify or explain very well right now. I am still only in the beginning stages of learning this library, but as I learn more I’ll try to give more thoughts, some tips, and correct any information I’ve gotten wrong in this initial post about it.
As always, I hope you have a great day and thanks for reading!