And start building react apps is an amazing piece of library because of its flexible nature that allows you to build components the way you like it. But it’s dangerous at the same time because a lot of things could go wrong if you’re not careful. ReactJS JavaScript Getting tired of hitting or reading the official docs by yourself? Here are the things you need to learn in React right now: Get started with React quickly using starter kits/boilerplates If you just want to get started and build an app using React, you need to download facebook’s boilerplate code in this page: _create-react-app - Create React apps with no build configuration._github.com facebook/create-react-app Building your own project from scratch takes time. If you just want to test the waters and build React projects quickly without wasting time in setups, I highly recommend the boilerplate to you. You could also try this site that contains and filters all the list of existing React boilerplates/starter kits that you might be specifically looking for (such as using TypeScript ahead of time): _These are repositories that you copy and modify to create your own React app. Pick a starter project with all the…_www.javascriptstuff.com React Starter Projects There are also some starter kits that were recommended by Facebook team, you should check this one out: _A JavaScript library for building user interfaces_reactjs.org Starter Kits - React Lastly, if you really want to build React projects from scratch on your own, start learning these things first: Babel The compiler for next generation JavaScriptbabeljs.io Babel · The compiler for next generation JavaScript Babel is an amazing tool to transpile JavaScript files from latest versions of ECMAScript to previous version so that it maintains compatibility against older browser versions. So you won’t have a problem when you’re going to use latest ES versions of JavaScript such as using destructuring or rest, spread, or arrow function syntax. JSX syntax (left) and Babel-transpiled as plain JavaScript (right) By default, JSX syntax of ReactJS isn’t supported as an official syntax of JavaScript. So we need to make use of babel to transpile JSX syntax into plain JavaScript (sadly). If you really wanna use React without any of these setups, you’re gonna code in its plain form just as you see in the right side of the image. Webpack _webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also…_webpack.js.org webpack At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles As what the docs say, Webpack is a module bundler that bundles your JavaScript files into one or splitted into different parts to improve performance. Webpack works pretty well with Babel so transpiling JSX syntax into plain javascript and bundling it into your project seamlessly pretty easy. Component-based, Events, State, Props — The essentials of React Component, Events, State Change, Re-rendering Everything is a Component Every React file is considered as a component. This is different than in the days that you were using jQuery where you update the DOM manually at the expense of code reusability and readability. Events to let users interact with At the beginning of your journey in React, the docs tell you that you probably have to use events as a way to handle user interactions. This is something that I really loved in the library, although it’s not obvious in some javascript libraries, I’m glad React focuses more on events and state. Props that define the properties of your component Displaying component props Props are a Component’s configuration, its options if you may. They are received from above and immutable. You could say they are the properties of your component just like how Object-Oriented Programming properties works. State that holds and changes your component Issuing a state change in your component You use the state to issue a change in your component behavior, data, and the way it looks. When it does, React issues a re-render to update your UI in the client-side. This is useful when you’re trying to manipulate objects, UIs that changes when user interacts with it. Or append an array of data and set its state. State Management Libraries you will need There are times that using vanilla React won’t be enough to build large-scale web apps. If this happens, there’s probably a need for you to use state Management libraries that fills in the gap and manage your state efficiently. Why need them? Because using plain React will only allow you to manage states at a component level. So when two or more components need to use the same state, it will be harder to do so. State Management libraries does that for you. See it for yourself. Redux _Edit description_redux.js.org Read Me If you’re looking for one of the well-structured, well-defined State Management libraries you can find, I can recommend Redux to you. I’ve been using it for quite a while in my personal projects and I could say this gets the job done. It’s been used by lots of developers to develop complex apps. Although its simplicity is debatable as you still need to know what are . The author himself doesn’t recommend the use of Redux unless your app gets complex which is true. You can read his article here: actions, action creators, reducers, connectors, mapStateToProps, and so on _People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at…_medium.com You Might Not Need Redux So before using it, always ask yourself whether it’s worth your team effort and time and the use-case of your app. If it’s small, then is enough for your needs. ;) this.SetState() Flux Application Architecture for Building User Interfacesfacebook.github.io Flux | Application Architecture for Building User Interfaces Long before Redux was built, there is Flux which was developed by Facebook team to supplement React and manage the state in a separate library using . unidirectional data flow Now, Redux is using the same design pattern as Flux, but Redux is an improved version of Flux. Although Flux has its own set of merits depending on your use-case. I know some people are still using Flux in their large projects, so depending on your requirements this is still worth considering. MobX _Both React and MobX provide very optimal and unique solutions to common problems in application development. React…_mobx.js.org Introduction | MobX MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple: Anything that can be derived from the application state, should be derived. Automatically. which includes the UI, data serialization, server communication, etc. Lots of developers from React community seems to introduce this state management to me. I haven’t personally used this one as of the moment. It seems that MobX ecosystem revolves around the use of observable state. So it might be worth considering. Some state management contenders Here are some of the contenders you wanna use: _unstated - State so simple, it goes without saying_github.com jamiebuilds/unstated I’ll update this list later when I get the chance to research more on existing state management libraries. If you love my stories, follow me on or for donations. :) Twitter buy me a coffee _The latest Tweets from Sonny R. Recio (@YellowFlashDev). 10% Entrepreneur / Fitness Junkie / Software Engineer /…_twitter.com Sonny R. Recio (@YellowFlashDev) | Twitter _Buy Me A Coffee help creators receive support from their audience in a friendly manner. Quickly accept donations and…_buymeacoff.ee Buy Sonny R. Recio a Coffee — BuyMeACoffee.com
