In 2021, we had a presidential election in Uganda. The whole internet was shut down for the entire week of January. Then it was partially reinstated for another month or so. Most social media websites we banned. In fact, even two years later Facebook is still banned. So, I decided to learn React JS. I really just wanted to get my mind off the depressing political situation in the country.
Alright, enough with the backdrop to my journey. I have grown to like React as a framework for creating dynamic single-page Apps. It’s mostly useful for building rich front-end interfaces that are highly dynamic.
The following are some of the resources I used while learning React. So here we go;
// React JS
- Official site https://reactjs.org/
- Scaffolding: https://create-react-app.dev
- React dev tools chrome extension: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
- Json server: https://github.com/typicode/json-server
// Redux
- Redux thunk https://github.com/reduxjs/redux-thunk
// Redux loggers
- Redux logger https://github.com/LogRocket/redux-logger
- Redux devtools https://github.com/reduxjs/redux-devtools
// DB/ORM
- Sequelize https://sequelize.org
- Migrations: Sequelize-cli https://sequelize.org/master/manual/migrations.html
// UI/CSS
- React font awesome: https://fontawesome.com/how-to-use/on-the-web/using-with/react
- React bootstrap https://react-bootstrap.github.io/
// server-side/Api
- Node https://nodejs.org/en/
- Express JS: https://expressjs.com/
//Authentication
- Passport js http://www.passportjs.org/
// images/media assets
- Cloudinary: https://cloudinary.com/
// JS testing
- Jest https://jestjs.io/docs/tutorial-react
- Fetch-mock https://www.npmjs.com/package/fetch-mock
- Redux mock store https://www.npmjs.com/package/redux-mock-store
- Supertest: https://www.npmjs.com/package/supertest
//API testing
- Httpie: https://httpie.io/
- Httptoolkit https://httptoolkit.tech/
// Deployment
- Docker https://www.docker.com/
- Gitlab: https://gitlab.com/
- SSL: https://letsencrypt.org/
- Domain: https://www.name.com/
- Hosting https://aws.amazon.com/
// IDE
- Webstorm https://www.jetbrains.com/webstorm/
- VSCode: https://code.visualstudio.com/
// Courses & articles
- Front-end web development with react: https://www.coursera.org/learn/front-end-react/home/welcome
- Dockerize react app https://mherman.org/blog/dockerizing-a-react-app/
- // spa
- SPA and the Single Page Myth https://johnpapa.net/pageinspa/
- What is a Full Stack developer? https://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/
- // react
- Introducing JSX https://reactjs.org/docs/introducing-jsx.html
- Presentational and Container Components https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Functional Stateless Components in React https://www.jackfranklin.co.uk/blog/functional-stateless-components-react/
- React Component Patterns: https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82
React Router DOM: Setup, essential components, and parameterized routes
- Conditional rendering: https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e/
- useEffect guide: https://blog.logrocket.com/guide-to-react-useeffect-hook/
- How to Fix the Infinite Loop Inside “useEffect” (React Hooks) https://medium.com/@andrewmyint/infinite-loop-inside-useeffect-react-hooks-6748de62871 / https://stackoverflow.com/questions/66404040/react-redux-reducer-as-useeffect-dependency-causes-infinite-loop
- Simple tips for writing clean React components https://itnext.io/simple-tips-for-writing-clean-react-components-c3facbf6680e
- How to Work with Forms, Inputs and Events in React https://medium.com/capital-one-tech/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b
- Create-react-app environments https://medium.com/@tacomanator/environments-with-create-react-app-7b645312c09d
- Forms + React : https://reactjs.org/docs/forms.html
- Controlled / Uncontrolled React Components https://www.viget.com/articles/controlling-components-react/
- Controlled and Uncontrolled Input Values in React https://medium.com/@peter.yun.kim/controlled-and-uncontrolled-input-values-in-react-907119cc98d4
- Controlled and uncontrolled form inputs in React don’t have to be complicated https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
- How to Work with Forms, Inputs and Events in React https://medium.com/capital-one-tech/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b
- Instant form field validation with React’s controlled inputs https://goshakkk.name/instant-form-fields-validation-react/
- Some Thoughts On Forms in React https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20
- Uncontrolled Components https://reactjs.org/docs/uncontrolled-components.html
- React GitHub repos https://twitter.com/chadayush/status/1549379795464515584?s=20&t=ripnujleJqEDh7Nh9CBbcA
- //redux
- The flux architecture: https://facebook.github.io/flux/docs/in-depth-overview
- Reduxt tutorials: https://github.com/markerikson/react-redux-links/blob/master/redux-tutorials.md
- Redux concepts and data flow: https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow
- Redux State, Actions, and Reducers https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#redux-fundamentals-part-3-state-actions-and-reducers
- Should you store your form state in Redux? https://goshakkk.name/should-i-put-form-state-into-redux/
- Redux: https://nicotsou.medium.com/tltr-redux-e4fc30f87e4a
- What the heck is a ‘thunk’? https://daveceddia.com/what-is-a-thunk/
- Redux and UI Integration https://redux.js.org/tutorials/fundamentals/part-5-ui-react
- Redux Middleware , Redux Thunk, Redux Logger
- How to add multiple middleware to Redux? https://stackoverflow.com/questions/43955199/how-to-add-multiple-middleware-to-redux/43955223#43955223
- //sequelize DB ORM + Express JS
- Building an Express API with Sequelize CLI and Unit Testing! https://levelup.gitconnected.com/building-an-express-api-with-sequelize-cli-and-unit-testing-882c6875ed59
- Sequelize relationships — Ultimate guide https://medium.com/@eth3rnit3/sequelize-relationships-ultimate-guide-f26801a75554
- Creating Demo APIs with json-server https://egghead.io/lessons/javascript-creating-demo-apis-with-json-server
- //Passport for User Authenticationf
- Understanding passport.js authentication flow http://toon.io/understanding-passportjs-authentication-flow/
- How to set up Twitter OAuth using Passport.js and ReactJS: https://medium.com/free-code-camp/how-to-set-up-twitter-oauth-using-passport-js-and-reactjs-9ffa6f49ef0
- Authentication using express+passport: https://zachgoll.github.io/blog/2019/choosing-authentication-strategy/
- JWTs + express: https://stackabuse.com/authentication-and-authorization-with-jwts-in-express-js/
- Implementing JSON Web Tokens & Passport.js in a JavaScript Application with React https://itnext.io/implementing-json-web-tokens-passport-js-in-a-javascript-application-with-react-b86b1f313436
- A Simple Authentication Strategy for Small Organizations (NodeJS, Express, Angular) https://zachgoll.github.io/blog/2019/choosing-authentication-strategy/
- //testing
- Testing React Apps https://jestjs.io/docs/tutorial-react
- API testing with supertest: https://medium.com/@cybertron611/api-testing-with-supertest-b6df8c215e36
- // animations in react
- // JS for React devs
Articles
- frontend design, react, and a bridge over the great divide http://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/
- my struggle to learn react >> http://bradfrost.com/blog/post/my-struggle-to-learn-react/
- Presentational and Container Components >> https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- The Elements of UI Engineering https://overreacted.io/the-elements-of-ui-engineering/
- The great divide: https://css-tricks.com/the-great-divide/
Books
- Road to react: https://leanpub.com/the-road-to-learn-react
- React for beginners; https://reactforbeginners.com/
React project dependencies
Here are some of the dependencies you might need in a React project.
"react": "^17.0.2": React is a JavaScript library for building user interfaces. This dependency installs React version 17.0.2."react-bootstrap": "^2.2.0": React Bootstrap is a UI framework that provides pre-designed components and styles for React applications. It allows you to build responsive and visually appealing user interfaces. This dependency installs React Bootstrap version 2.2.0."react-dom": "^17.0.2": React DOM is the package that provides DOM-specific methods for React. It allows React components to be rendered and manipulated in the browser’s DOM. This dependency installs React DOM version 17.0.2."react-redux": "^7.1.0": React Redux is the official Redux binding for React. It provides a set of React components and hooks that allow you to interact with the Redux state management library in a React application. This dependency installs React Redux version 7.1.0."redux": "^4.0.4": Redux is a predictable state container for JavaScript applications. It helps manage the state of an application in a centralized store, making it easier to track and update the application state. This dependency installs Redux version 4.0.4."redux-devtools-extension": "^2.13.8": Redux DevTools Extension is a development tool that provides a browser extension for inspecting and debugging Redux state changes. It enhances the Redux development experience by allowing you to view, time-travel, and track changes to the Redux store. This dependency installs Redux DevTools Extension version 2.13.8."redux-thunk": "^2.3.0": Redux Thunk is a middleware for Redux that allows you to write action creators that return functions instead of plain objects. It enables asynchronous actions in Redux by delaying the dispatch of an action, allowing you to perform side effects like API calls before dispatching the actual action. This dependency installs Redux Thunk version 2.3.0.
These packages are commonly used in combination to build React applications with Redux state management, styling with React Bootstrap, and server-side rendering with Next.js.
I hope you found these links and resources helpful.