Writing the first react App
Hello everyone with react taking up the world of Web development by a storm, I decided to give it a try.
I have started working on React by taking a course on React and Redux by Maximilian Swartzmiller.
The advantages I found with reacts are:
- Encapsulated components: Because apps can be divided up into smaller components, it allows it to be broken down into smaller pieces that can be re-used more easily.
- Dynamic properties & states: Elements and components within React can be given states and properties (props). These states and props can be changed and passed down to other elements and components within it the app. This allows for more reusable code and better organization.
- Virtual DOM: React works off of a virtual DOM. Because updating the actual DOM can lead to longer load times, React relies on a virtual DOM, which is like a lightweight, faster version of the DOM. whenever a change is made to states or props, React checks those changes, and only re-renders the elements that have changed, instead of rendering the entire document.
- React is Independent of the rest of the application: If you want to use React, and integrate a back end database with MongoDB, or any other framework, you can easily do so.
Getting Started:
Getting started with React is simple. After it’s installed, you can just run the create-react-app on the command line, followed by the name of the app you want to create. This creates the react app, with all the necessary functionality you need, already built into the app. Then you can just cd into the react app, and start it with `npm start.`
In this course the first demo is done on CodePen and I followed it blindly to get easy started.
The script.babel files are the JS library links which babel will use to to transpile the JS code.
You can very easily understand this minimal CSS and HTML involved.
ReactDOM.render() is the most important function used here, which renders the React code.
How amazing that once we have created props we have to just change the content and not component.
I am loving ReactJS, if you wish to start and are member of ACM JUIT student chapter, contact me for the access of courses on ReactJS, Redux and NodeJS
