How I learned React
About me
I am Frontend developer currently working at a SF-based startup called Fiskkit. We are making grading and monitoring assignments easier for Teachers.
Why I wanted to learn React
Because we are currently converting our site from AngularJS to ReactJS
How I approached learning React
Hi folks! I am an Angular developer with 2+ years of experience plunging into the ReactJS world. Thought of documenting my journey as I paddle through.
First thing, get acquainted with next-generation JavaScript features. The knowledge is going to make your life way smoother as you begin building a new app in React(or that matter any JS-based framework).
Challenges I faced
How do I start?
Key features you need to start building React app are:
Dependency Management Tool (npm/yarn) — to manage dependencies and packages like React and ReactDOM.
Bundler (Webpack) — To tie together various React components into a lean file structure. It reduces the server request being made to varies components we build in React. Webpack also helps to hook Babel and Presets so that it can be a part of the bundling and optimization process.
Compiler (Babel +Presets ) — to compile Next-gen JS and make it accessible in all browsers. Basically, it converts Next-gen JS features to workarounds for older browsers which are still not accepting the latest JS features. Now, the code is accepted and displayed for better UI-experience and there is sunshine on the screen for one and all!
Development Server — to run a React app in our local machine.
Sounds complicated? Worry not, create-react-app to rescue! It’s a Github repository developed and maintained by Facebook.
Key takeaways
It helps to install all the elements required to set up a React app on your computer with one single command — npm install create-react-app my-app.
Check out the link for the Github repository here: https://github.com/facebook/create-react-app
Simply navigate to your my-app folder post this and type — npm start and voila! Your first React app is spun up and ready to develop.
Tips and advice
It's time to explore various files created by the app. Make changes to JSX of app.js to see the content change on the local browser. The good thing about the app is it automatically takes up changes and displays output to the browser. More to follow on my next blog of this journey. Toodles!
Final thoughts and next steps
P.S. The resource I am following to learn ReactJS is an awesome course on Udemy by Maximilian Schwarzmuller called React 16.6 — The complete guide
https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/overview
