How to Build a Website with React, React Router & Styled-Components Pt.2

  • In this second, we will start by creating responsive navigation, playing with React , and creating a few more React components.
  • What is a better way to start the second part of this React website tutorial than resetting some default browser styles, such as those for , applied to element and applied to and, well, everything.
  • As the next step, we can take care about the first page for our React website, the homepage.
  • To keep our React website project tidy, we can put all components for typography into one file.
  • When we finished our work on these components, we put together the first page for our website, the homepage.

Have you ever though about building a website with React, React-router and styled-components? This tutorial is right for you. Practice creating React components, working with React state, using some handy helpers from styled-components. And, at the end, create your first page for your React website!
Continue reading “How to Build a Website with React, React Router & Styled-Components Pt.2”

Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉

Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉

  • • What we’ll do – – We’re excited to host Sara’s first workshop at ReactJS Girls!
  • Testing React Workshop – – – – In this workshop I will be going through unit testing in Javascript, how you can make it fun and meaningful for your app.
  • ** – – – – Sara Vieira (@NikkitaFTW) – – – – Front-End Developer at @YLDio, open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl – – – – — – – – – Thank you our sponsors for making this happen: – – – -…
  • The team is committed the open source community aiming to create a long-standing engineering culture and delivery capability in each piece of work.
  • YLD is looking for React / Node / Devops engineers to join the team: out Tech Talks YLD Youtube channel for more React / Node / Product talks; join the conversation on Twitter @YLDio (https://twitter.com/YLDio) and on LinkedIn us on Twitter @ReactJSgirls for more What to bring – – Bring…

• What we’ll doWe’re excited to host Sara’s first workshop at ReactJS Girls! Testing React WorkshopIn this workshop I will be going through unit testing in Javascript, how you can make it fun and mean
Continue reading “Excited to host #ReactJS testing workshop by @NikkitaFTW at #ReactJSgirls on 10 April 🎉🎉🎉”

Build production ready universal apps using MERN Stack v2.0 #MongoDB #ExpressJS #ReactJS #NodeJS via @mern_io

  • In this version, we also added code generators.
  • Blueprints for those generators are located at , and config is located at .
  • Take a look at this section in the documentation which explains how to modify generators.

MERN is a scaffolding tool which makes it easy to build universal apps using Mongo, Express, React, NodeJS, Redux and Webpack. It minimizes the setup time and gets you up to speed using proven technologies.
Continue reading “Build production ready universal apps using MERN Stack v2.0 #MongoDB #ExpressJS #ReactJS #NodeJS via @mern_io”

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

  • So to start let’s start with the basic file structure layout:I have created a folder I’m going to be doing all my work in called appInside it I have a config folder and a views folder with a index.js file as well.You can call your folders whatever you want, but…
  • /app/index.
  • js file.Our App.js file should look like:import App from ‘.
  • /app/index’;export default App;As always, we want to export it so our root level index.js can import it.Our index.js on the root level should look like this:import { AppRegistry } from ‘react-native’;import App from () = App);This is best practice if you want to set up any kind of server/database or…

No offense, but all of the other React-Native navigation articles I’ve found on Medium don’t work. So I took it upon myself to figure it out, and write a better, smarter, easier way for navigation…
Continue reading “Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation”

Horizontal scroll animations in React Native – codeburst

  • Horizontal scroll animations in React NativeLink Animated with ScrollView to create a nice navigation UI animation in React NativeWhat we will be buildingRN lets you build a nice and smooth UIWhat you will needReact NativeSimulatorNo third party libraries required :)Creating Screen component with AnimatedFirst, import Animated, Dimensions, ScrollView, StyleSheet, Text, View from “react-native” .
  • Next, create a component that will be treated as a screen or a view.We are using Animated.View here because we are going to animate that wrapper component.That width ofscrollPage style and are important because we are going to interpolate horizontal scrolling values to multiple animation values.
  • In other words, we are going to track where the screen is and animate the screen component based on that value.It’s one of the things that are tricky to explain in words, but it is the key concept to understand for this to work.Basically, we link animations based on the…
  • When the scroll position is at 150, first screen is half way done exiting, and the second screen is half way done entering.Adding animationsSince they are all set up, it is time to write the animations.
  • You would have to write a different inputRange since FlatList removes items that scroll way off screen.I think this is pretty neat UI animation that’s pretty simple to use.

That width ofscrollPage style and transitionAnimation(props.index) are important because we are going to interpolate horizontal scrolling values to multiple animation values. In other words, we are…
Continue reading “Horizontal scroll animations in React Native – codeburst”